<%--
  User: eric
  Date: 2015/5/8
  Time: 21:05
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
            src="http://209.85.228.42/maps/api/js?key=AIzaSyCM8yHRv0GgJgRKGIBVku5iQ6wRylpYHMk&sensor=false">
    </script>

    <script type="text/javascript">


        var selectedMarker = null;

        var beaches = [
            ['Bondi Beach', 28.58524, 112.32954, 1],
            ['Cronulla Beach', 28.58580, 112.33295, 2],
            ['Coogee Beach', 28.58652, 112.33698, 3],
            ['Manly Beach', 28.58701, 112.34001, 4],
            ['Maroubra Beach', 28.58737, 112.34411, 5],
            ['Maroubra Beach', 28.58810, 112.34846, 6]
        ];


        var marker = null;
        var redIcon = 'red.png'
        var greenIcon = 'lv.png'
        var yellowIcon = 'huang.png';

        var infowindowMarker = null;


        // right menu begin
        var controlUI = null;
        var controlDiv = null;
        controlDiv = document.createElement('DIV');
        var menuControl = new createContextMenus(controlDiv);
        menuControl.index = 1;
        // right menu end

        var map = null;
        function initialize() {

            var j = window.parent.document.getElementById('j').value;
            var w = window.parent.document.getElementById('w').value;

            // 展示地图
            var mapOptions = {
                center: new google.maps.LatLng(51.508742,-0.120850),
                //屏蔽地图卫星两个选项
                mapTypeControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT,
                    mapTypeIds: []
                },

                zoom: 14
            };
            map = new google.maps.Map(document.getElementById("map_canvas"),
                    mapOptions);

            //right menu
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv)

            // 标记点
            marker = new google.maps.Marker({
                map: map,
                // 拖动组件
                draggable:true,
                animation: google.maps.Animation.DROP,
                //自定义图标
                // icon: img,
                position: map.getCenter()
            });

            bindContextMenus(marker);
            var txt = '';
            for (var a in marker) {
                txt += map + "##"+marker[map] +"\n";
            }

            setMarkers(map, beaches);
            drawline(map, beaches);
            var infowindow = new google.maps.InfoWindow();
            infowindow.setContent('<b>你好</b>');
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });

            google.maps.event.addListener(marker, 'click', toggleBounce);
            google.maps.event.addListener(marker, 'rightclick', toggleBounce);

        }


        function setMarkers(map, locations) {
            // Add markers to the map

            // Marker sizes are expressed as a Size of X,Y
            // where the origin of the image (0,0) is located
            // in the top left of the image.

            // Origins, anchor positions and coordinates of the marker
            // increase in the X direction to the right and in
            // the Y direction down.
            var image = {
                url: 'more-dark.png',
                // This marker is 20 pixels wide by 32 pixels tall.
                size: new google.maps.Size(20, 32),
                // The origin for this image is 0,0.
                origin: new google.maps.Point(0,0),
                // The anchor for this image is the base of the flagpole at 0,32.
                anchor: new google.maps.Point(0, 32)
            };
            // Shapes define the clickable region of the icon.
            // The type defines an HTML &lt;area&gt; element 'poly' which
            // traces out a polygon as a series of X,Y points. The final
            // coordinate closes the poly by connecting to the first
            // coordinate.
            var shape = {
                coord: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };

            var m = [];
            for (var i = 0; i < locations.length; i++) {
                var beach = locations[i];
                var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
                var marker2 = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon : greenIcon,
                    shape: shape,
                    title: beach[0],
                    zIndex: beach[3]
                });


                m[i] = marker2
            }

            for (var i = 0; i < m.length; i ++) {

                google.maps.event.addListener(m[i], 'click', function(n) {
                    var latLng = n['latLng'];
                    var curMarker = getMarker(m, n);
                    if (curMarker != null) {
                        if (curMarker.getAnimation() != null) {
                            curMarker.setAnimation(null);
                        } else {
                            curMarker.setAnimation(google.maps.Animation.BOUNCE);
                        }
                    }
                });

                google.maps.event.addListener(m[i], 'rightclick', function(n) {
                    var latLng = n['latLng'];
                    var curMarker = getMarker(m, n);
                    if (curMarker != null) {

                        refresh(); // 重置infowindowMarker和selectedMarker

                        infowindowMarker = new google.maps.InfoWindow();
                        selectedMarker = curMarker;

                        var t = "<div style='width:30px;height:60px'>"
                                +	"<a href='javascript:markerRunning();'> 启用 </a><br/>"
                                + "<a href='javascript:markerStop();'>停用 </a><br/>"
                                + "<a href='javascript:markerFail();'> 故障</a><br/>"
                                + "</div>";
                        infowindowMarker.setContent(t);
                        infowindowMarker.open(map, curMarker);
                    }
                });
                //bindContextMenus(m[i]);
            }
        }

        function markerRunning() {
            if (null != selectedMarker) {
                selectedMarker.setIcon(greenIcon);
            }
        }

        function markerStop() {
            if (null != selectedMarker) {
                selectedMarker.setIcon(redIcon);
            }
        }
        function markerFail() {
            if (null != selectedMarker) {
                selectedMarker.setIcon(yellowIcon);
            }
        }

        //获得一个指定的markert
        function getMarker(markets, n) {

            var latLng = n['latLng'];

            for (var j = 0; j < markets.length; j ++) {
                if (markets[j].position.d == latLng.d && markets[j].position.e == latLng.e) {
                    return markets[j];
                }
            }
        }


        function drawline(map, locations) {
            // Define a symbol using SVG path notation, with an opacity of 1.
            var lineSymbol = {
                path: 'M 0,-1 0,1',
                strokeOpacity: 1,
                scale: 4
            };

            for (var i = 0; i < locations.length - 1; i ++) {
                var lineCoordinates = [
                    new google.maps.LatLng(locations[i][1], locations[i][2]),
                    new google.maps.LatLng(locations[i + 1][1], locations[i + 1][2])
                ];
                // Create the polyline, passing the symbol in the 'icons' property.
                // Give the line an opacity of 0.
                // Repeat the symbol at intervals of 20 pixels to create the dashed effect.
                var line = new google.maps.Polyline({
                    path: lineCoordinates,
                    strokeOpacity: 0,
                    icons: [{
                        icon: lineSymbol,
                        offset: '0',
                        repeat: '20px'
                    }],
                    map: map
                });
            }
        }

        function toggleBounce() {
            if (marker.getAnimation() != null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        ///右键菜单



        function createContextMenus(controlDiv) {

            if (!controlUI) {

                controlUI = document.createElement("div");
                controlUI.style.width = "220px";
                controlUI.style.display = "none";
                controlUI.style.border = "1px solid #cccccc";
                controlUI.style.textAlign = 'center';
                controlUI.style.backgroundColor = 'white';
                controlUI.innerHTML =
                        "<a href='javascript:'><div class='context'> 停用 </div></a>"
                        + "<a href='javascript:'><div class='context'> 故障 </div></a>"
                        + "<a href='javascript:'><div class='context'> 启用 </div></a>";
                controlDiv.appendChild(controlUI);
            }
        }
        function bindContextMenus(marker) {

            google.maps.event.addDomListener(marker, 'rightclick', function() {
                controlUI.style.position = "relative";
                controlUI.style.left = window.event.clientX - 80 + "px";
                controlUI.style.top = window.event.clientY + "px";
                controlUI.style.display = "block";
            });

            google.maps.event.addDomListener(controlDiv, 'click', function() {
                controlUI.style.display = "none";
                refresh();
            });
            google.maps.event.addDomListener(map, 'click', function() {
                controlUI.style.display = "none";
                refresh();
            });

            google.maps.event.addDomListener(map, 'drag', function() {
                controlUI.style.display = "none";
                refresh();
            });

            google.maps.event.addDomListener(map, 'zoom_changed', function() {
                controlUI.style.display = "none";
                refresh();
            });


        }
        function refresh() {
            if (infowindowMarker != null) {
                infowindowMarker.close();
            }
            if (selectedMarker != null) {
                selectedMarker = null;
            }
        }


    </script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>


</body>
</html>
